<template>
  <li :class="classes">
    {{ data.label }}
    <Icon type="icon-right" v-if="showArrow" />
    <Loading style="float:right; margin-left: 10px;" :size="17" :value="showLoading" />
  </li>
</template>
<script>
import Icon from '../../icon'
import Loading from '../../loading'
export default {
  name: 'Casitem',
  components: { Icon, Loading },
  props: {
    data: Object,
    prefixCls: String,
    tmpItem: Object
  },
  computed: {
    classes () {
      return [
        `${this.prefixCls}-menu-item`,
        {
          [`${this.prefixCls}-menu-item-active`]:
            this.tmpItem.value === this.data.value,
          [`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
        }
      ]
    },
    showArrow () {
      return (
        (this.data.children && this.data.children.length) ||
        ('loading' in this.data && !this.data.loading)
      )
    },
    showLoading () {
      return 'loading' in this.data && this.data.loading
    }
  }
}
</script>
